<!-- 表单模式：当作为 itemComponent 在对话框中显示时（有 itemForm 且有 tableConfig） -->
@if (itemForm && tableConfig) {
  <form [formGroup]="itemForm">
    <div class="form-field">
      <label>姓名</label>
      <input formControlName="name" type="text" placeholder="请输入姓名">
    </div>
    <div class="form-field">
      <label>邮箱</label>
      <input formControlName="email" type="email" placeholder="请输入邮箱">
    </div>
    <div class="form-field">
      <label>角色</label>
      <select formControlName="role" aria-label="角色">
        <option value="用户">用户</option>
        <option value="编辑">编辑</option>
        <option value="管理员">管理员</option>
      </select>
    </div>
    <div class="form-field">
      <label>状态</label>
      <select formControlName="status" aria-label="状态">
        <option value="active">活跃</option>
        <option value="inactive">未激活</option>
      </select>
    </div>
  </form>
}

<!-- 页面模式：当作为页面组件显示时 -->
@else {
  <div class="table-demo-container">
    <div class="demo-header">
      <h1>表格组件演示</h1>
      <p class="description">
        这是一个功能完整的表格组件演示，展示了分页、排序、搜索、选择、添加、删除等功能。
      </p>
    </div>

    <mat-card class="demo-card">
      <mat-card-content>
        <cne-table></cne-table>
      </mat-card-content>
    </mat-card>

    <div class="demo-info">
      <h3>功能说明</h3>
      <ul>
        <li><strong>分页</strong>：支持分页浏览，可在底部更改每页显示数量</li>
        <li><strong>排序</strong>：点击列头可对数据进行排序（点击列名）</li>
        <li><strong>搜索</strong>：在工具栏可搜索数据（目前搜索功能按钮需要点击触发）</li>
        <li><strong>选择</strong>：勾选复选框可选择单行或全部</li>
        <li><strong>添加</strong>：点击右上角 + 按钮可添加新数据</li>
        <li><strong>删除</strong>：每行右侧有删除按钮，选择多行后可通过批量操作删除</li>
      </ul>
    </div>
  </div>
}

